<template>
  <div class="app-container">
    <div class="top">
      <div class="topSearch">
        <el-input style="width: 200px;" v-model="id" placeholder="输入id" size="small"></el-input>
        <el-button style="margin-left: 10px;" type="primary" size="small" @click="search">id搜索</el-button>
        <el-input style="width: 200px;margin-left: 40px" v-model="name" placeholder="输入账号" size="small"></el-input>
        <el-button style="margin-left: 10px;" type="primary" size="small" @click="search">账号搜索</el-button>
      </div>
      <el-popover placement="bottom-start" width="300" v-model="addPopup" trigger="click" style="margin-left: 50px;">
        <el-input style="margin-top: 20px;" v-model="username" placeholder="输入账号" size="small"></el-input>
        <el-input style="margin-top: 20px;" v-model="password" placeholder="输入密码" size="small"></el-input>
        <el-select style="margin-top: 20px;" v-model="value" placeholder="请选择角色" size="small">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button style="margin-top: 20px;" type="primary" size="small" @click="addUser">确认添加</el-button>
        <el-button slot="reference" size="small">添加用户</el-button>
      </el-popover>
    </div>
    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column fixed label="id" width="150" align="center">
        <template slot-scope="scope">{{scope.row.id}}</template>
      </el-table-column>
      <el-table-column label="账号" width="150" align="center">
        <template slot-scope="scope">{{scope.row.username}}</template>
      </el-table-column>
      <el-table-column label="身份" width="150" align="center">
        <template slot-scope="scope">{{scope.row.role==0?'总监':scope.row.role==1?'经理':scope.row.role==2?'主管':'门店'}}</template>
      </el-table-column>
      <el-table-column label="状态" width="150" align="center">
        <template slot-scope="scope">{{scope.row.status==0?'禁用':'启用'}}</template>
      </el-table-column>

      <el-table-column label="查看上级" width="150" align="center">
        <template slot-scope="scope">
          <el-popover
            ref="popover"
            popper-class="centered-popover"
            width="90%"
            trigger="click">
            <el-table :data="gridData">
              <el-table-column fixed label="id" width="150" align="center">
                <template slot-scope="scope">{{scope.row.id}}</template>
              </el-table-column>
              <el-table-column label="账号" width="150" align="center">
                <template slot-scope="scope">{{scope.row.username}}</template>
              </el-table-column>
              <el-table-column label="身份" width="150" align="center">
                <template slot-scope="scope">{{scope.row.role==0?'总监':scope.row.role==1?'经理':scope.row.role==2?'主管':'门店'}}</template>
              </el-table-column>
              <el-table-column label="状态" width="150" align="center">
                <template slot-scope="scope">{{scope.row.status==0?'禁用':'启用'}}</template>
              </el-table-column>
              <el-table-column label="查看上级" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="upUser(scope.row)">查看上级</el-button>
                </template>
              </el-table-column>
              <el-table-column label="查看更多" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="moreUser(scope.row)">查看更多</el-button>
                </template>
              </el-table-column>
              <el-table-column label="修改密码" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="editPassword(scope.row)">修改密码</el-button>
                </template>
              </el-table-column>
              <el-table-column label="资质审核" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="userOk(scope.row)">通过</el-button>
                  <el-button type="primary" size="small" @click="userNo(scope.row)">驳回</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="lookTotal" @current-change="lookChange" style="margin-top: 30px;margin-left: 50%;">
            </el-pagination>
            <el-button slot="reference" type="primary" size="small" @click="upUser(scope.row)">查看上级</el-button>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="查看下级" width="150" align="center">
        <template slot-scope="scope">
          <el-popover
            ref="popover"
            popper-class="centered-popover"
            width="90%"
            trigger="click">
            <el-table :data="gridData">
              <el-table-column fixed label="id" width="150" align="center">
                <template slot-scope="scope">{{scope.row.id}}</template>
              </el-table-column>
              <el-table-column label="账号" width="150" align="center">
                <template slot-scope="scope">{{scope.row.username}}</template>
              </el-table-column>
              <el-table-column label="身份" width="150" align="center">
                <template slot-scope="scope">{{scope.row.role==0?'总监':scope.row.role==1?'经理':scope.row.role==2?'主管':'门店'}}</template>
              </el-table-column>
              <el-table-column label="状态" width="150" align="center">
                <template slot-scope="scope">{{scope.row.status==0?'禁用':'启用'}}</template>
              </el-table-column>
              <el-table-column label="查看下级" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="downUser(scope.row)">查看下级</el-button>
                </template>
              </el-table-column>
              <el-table-column label="查看更多" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="moreUser(scope.row)">查看更多</el-button>
                </template>
              </el-table-column>
              <el-table-column label="修改密码" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="editPassword(scope.row)">修改密码</el-button>
                </template>
              </el-table-column>
              <el-table-column label="资质状态" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="userOk(scope.row)">通过</el-button>
                  <el-button type="primary" size="small" @click="userNo(scope.row)">拒绝</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="lookTotal" @current-change="lookChange" style="margin-top: 30px;margin-left: 50%;">
            </el-pagination>
            <el-button slot="reference" type="primary" size="small" @click="downUser(scope.row)">查看下级</el-button>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="查看更多" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="moreUser(scope.row)">查看更多</el-button>
        </template>
      </el-table-column>
      <el-table-column label="修改密码" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editPassword(scope.row)">修改密码</el-button>
        </template>
      </el-table-column>
      <el-table-column label="资质状态" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="userOk(scope.row)">通过</el-button>
          <el-button type="primary" size="small" @click="userNo(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="total" @current-change="indexChange" style="margin-top: 30px;margin-left: 50%;">
    </el-pagination>

    <!-- 查看更多信息 -->
    <el-dialog title="入驻信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="门店名称" :label-width="formLabelWidth">
          <el-input v-model="form.shopName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请人姓名" :label-width="formLabelWidth">
          <el-input v-model="form.applyName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.applyPhone" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="form.card" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="门店照片" :label-width="formLabelWidth">
          <div class="block">
              <img class="moreImg" :src="form.shopIcon" alt="" />
            </div>
        </el-form-item>
        <el-form-item label="身份证人像面" :label-width="formLabelWidth">
          <div class="block">
              <img class="moreImg" :src="form.cardPic1" alt="" />
            </div>
        </el-form-item>
        <el-form-item label="身份证国徽面" :label-width="formLabelWidth">
          <div class="block">
              <img class="moreImg" :src="form.cardPic2" alt="" />
            </div>
        </el-form-item>
        <el-form-item label="营业执照照片" :label-width="formLabelWidth">
          <div class="block">
              <img class="moreImg" :src="form.zhizhaoPic" alt="" />
            </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 查看更多信息 -->
    <el-dialog title="修改密码" :visible.sync="passwordVisible">
      <el-form>
        <el-form-item label="输入密码" :label-width="formLabelWidth">
          <el-input v-model="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordVisible = false">取 消</el-button>
        <el-button type="primary" @click="passwordSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { create,list,listByParent,listByChild,updatePassword,updateStatus } from '@/api/newTc'
  export default {
    name: 'home',
    data() {
      return {
        id: '',
        name:'',
        pageNum:1,
        pageSize:10,
        total: 0,
        addPopup: false,
        username: '',
        password: '',
        options: [{
          value: '1',
          label: '经理'
        }, {
          value: '2',
          label: '主管'
        }, {
          value: '3',
          label: '门店'
        }],
        value: '',
        tableData: [],
        //查看下级数据
        gridData:[],
        lookNum:1,
        lookSize:10,
        lookTotal:0,
        lookId:'',
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        // 修改密码
        password:'',
        passwordVisible:false,
        passwordId:''
      }
    },
    created() {
      this.init()
    },
    methods: {
      // 搜索
      search() {
        this.pageNum = 1
        this.init()
      },
      //添加用户
      addUser() {
        let data = {
          password:this.password,
          username:this.username,
          status:1,
          role:this.value
        }
        create(data).then(res=>{
          this.$message(res.message);
          this.init()
        }).catch(res=>{
          this.$message(res.message)
        })
        this.addPopup = false
      },
      //查看上级
      upUser(e) {
        this.lookId = e.id
        this.lookNum = 1
        this.listByChild()
      },
      // 查看上级数据
      listByChild(){
        let data = {
          memberId:this.lookId,
          pageNum:this.lookNum,
          pageSize:this.lookSize
        }
        listByChild(data).then(res=>{
          console.log(res)
          this.gridData = res.data.list
          this.lookTotal = res.data.total
        })
      },
      //查看下级
      downUser(e) {
        this.lookId = e.id
        this.lookNum = 1
        this.listByParent()
      },
      //查看下级数据
      listByParent(){
        let data = {
          memberId:this.lookId,
          pageNum:this.lookNum,
          pageSize:this.lookSize
        }
        listByParent(data).then(res=>{
          console.log(res)
          this.gridData = res.data.list
          this.lookTotal = res.data.total
        })
      },
      //查看下级分页
      lookChange(e){
        console.log(e)
        this.lookNum = e
        this.listByParent()
      },
      //查看更多
      moreUser(e) {
        console.log(e)
        this.form = e
        this.dialogFormVisible = true
      },
      //修改密码
      editPassword(e) {
        this.passwordId = e.id
        this.passwordVisible = true
      },
      passwordSure(){
        let data = {
          memberId:this.passwordId,
          password:this.password
        }
        updatePassword(data).then(res=>{
          this.$message(res.message)
        }).catch(res=>{
          this.$message(res.message);
        })
        this.passwordVisible = false
      },
      //通过审核
      userOk(e){
        this.$confirm('确认通过申请', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateStatus(e.id,1)
        }).catch(() => {
        });
      },
      //驳回审核
      userNo(e){
        this.$confirm('确认驳回申请', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateStatus(e.id,-1)
        }).catch(() => {
        });
      },
      // 审核接口
      updateStatus(id,status){
        console.log(1)
        let data = {
          id:id,
          status:status
        }
        updateStatus(data).then(res=>{
          console.log(res)
		  this.$message(res.message);
        })
      },
      //分页
      indexChange(e){
        console.log(e)
        this.pageNum = e
        this.init()
      },
      //查询用户列表
      list(){
        let data = {
          id:this.id,
          name:this.name,
          pageNum:this.pageNum,
          pageSize:this.pageSize,
        }
        list(data).then(res=>{
          console.log(res)
          this.total = res.data.total
          this.tableData = res.data.list
        })
      },
      //初始化
      init(){
        this.list()
      }
    }
  }
</script>

<style scoped>
  .app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
    min-height: 500px;
  }

  .top {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
  }

  .topSearch {
    width: 600px;
    display: flex;
    align-items: center;
  }
  .centered-popover {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .centered-popover .el-popover {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .moreImg{
    width: 50px;
    height: 50px;
  }
</style>
